<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="Brennan Wu">
    
    <title>
        
            前端协作规范 |
        
        Brennan&#39;s Blog
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en","path":"search.json"};
    KEEP.theme_config = {"toc":{"enable":true,"number":false,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/logo.svg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"All the way adhere to the people,and the mountains are the most beautiful scenery","description2":"一路坚持的人，都和山色一样是最美的景"},"scroll":{"progress_bar":{"enable":true},"percent":{"enable":false}}},"local_search":{"enable":true,"preload":false},"code_copy":{"enable":true,"style":"mac"},"pjax":{"enable":false},"lazyload":{"enable":true},"version":"3.4.3"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    
        <span class="scroll-progress-bar"></span>
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Brennan&#39;s Blog
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">前端协作规范</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Brennan Wu</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;2021-10-27 08:35:06
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E8%A7%84%E8%8C%83/">规范</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E5%89%8D%E7%AB%AF%E8%A7%84%E8%8C%83-%E5%B7%A5%E4%BD%9C%E6%B5%81%E7%A8%8B/">前端规范 工作流程</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="一、技术栈规范"><a href="#一、技术栈规范" class="headerlink" title="一、技术栈规范"></a>一、技术栈规范</h2><p>团队的开发效率是基于稳定且熟练的技术栈的。稳定的技术栈规范有利于团队协作和沟通; 另外如果团队精通这个技术栈，当出现问题或者需要深入调优, 会相对轻松。<br>前端技术栈规范主要包含下面这些类型：</p>
<ul>
<li>编程语言 - Typescript或Javascript</li>
<li>UI框架及其配套生态</li>
<li>样式 - 包含命名规范、css框架、预处理器、方法集等等</li>
<li>动画引擎 - 包括Animate.css或Animista等</li>
<li>工具库 - 例如jquery、lodash等等</li>
<li>开发/调试工具</li>
</ul>
<h3 id="1-1-技术选型"><a href="#1-1-技术选型" class="headerlink" title="1.1 技术选型"></a>1.1 技术选型</h3><p>怎么进行选型，可以按照以下四点：</p>
<ul>
<li><strong>选择你最熟悉的技术。</strong>团队如果熟悉该技术，则可以很好地控制使用过程中的风险，方便对程序进行调优。所以成员熟悉、或至少Leader熟悉程度，是技术选型的一个打分项。</li>
<li><strong>选择拥有强大生态和社区支撑的开源技术。</strong>强大的生态和社区意味着不需要重复造轮子，遇到问题可以很快解决，有更多的选择。从公司层面看，使用活跃的技术也比较好招人。</li>
<li><strong>选择成长期的技术。</strong>选择的技术应该是向前发展的、面向未来的, 这是选型的基本原则，不去选择那些’过气’的技术。</li>
<li><strong>从业务上考虑。</strong>选型需要充分地理解业务，理解用户需求，当下需要解决的首要问题，以及可能的风险有哪些，再将目标进行分解，进行具体的技术选型、模型设计、架构设计。</li>
</ul>
<h3 id="1-2-迎接新技术"><a href="#1-2-迎接新技术" class="headerlink" title="1.2 迎接新技术"></a>1.2 迎接新技术</h3><p>鼓励学习新的技术、淘汰旧的技术栈。因为一般而言新的技术或解决方案，是为了更高的生产力而诞生的。<strong>团队接纳一个新技术需要考虑以下几点：</strong></p>
<ul>
<li><strong>学习成本。</strong>考虑团队成员的接纳能力。</li>
<li><strong>收益。</strong>是否能够解决当前的某些痛点。</li>
<li><strong>考虑风险。</strong>一般不将一个实验阶段的技术使用到生产环境中。<br>就团队而言，每个成员都会有自己感兴趣的方向和领域，所以可以分工合作，探索各自的领域，再将成果分享出来，如果靠谱的话则可以在实验项目中先试验一下，最后才推广到其他项目中。</li>
</ul>
<h2 id="二、浏览器兼容规范"><a href="#二、浏览器兼容规范" class="headerlink" title="二、浏览器兼容规范"></a>二、浏览器兼容规范</h2><p>前端团队应该根据针对应用所面对的用户群体、应用类型、开发成本、浏览器市场统计数据等因素，来制定自己的浏览器兼容规范，并写入应用使用手册中。<strong>有了浏览器兼容规范，前端开发和兼容性测试就有理有据，避免争议; 同时它也是前端团队的一种对外声明，除非特殊要求，不符合浏览器兼容规范的浏览器，前端开发人员可以选择忽略。</strong></p>
<h3 id="2-1-确定兼容策略"><a href="#2-1-确定兼容策略" class="headerlink" title="2.1 确定兼容策略"></a>2.1 确定兼容策略</h3><p>有两个不同方向策略：</p>
<ul>
<li><strong>渐进增强：</strong>保证低版本浏览器的体验，对于支持新特性的新浏览器提供稍好的体验。</li>
<li><strong>优雅降级：</strong>为现代浏览器提供最好的体验，而旧浏览器则退而求之次，保证大概的功能。<br>选择不同的策略对前端开发的影响是比较大的，但是开发者没有选择权。<strong>确定哪种兼容策略，取决于用户比重，如果大部分用户使用的是现代浏览器，就应该使用优雅降级，反之选择渐进增强。</strong></li>
</ul>
<h3 id="2-2-确定浏览器分级"><a href="#2-2-确定浏览器分级" class="headerlink" title="2.2 确定浏览器分级"></a>2.2 确定浏览器分级</h3><p>将浏览器划分为多个等级，不同等级表示不同的支持程度。可将浏览器划分为以下三个等级：</p>
<ul>
<li><strong>完全兼容：</strong>保证百分百功能正常。</li>
<li><strong>部分兼容：</strong>只能保证功能、样式与需求大致一致。对于一些不影响主体需求和功能的bug，会做降低优先级处理或者不处理。</li>
<li><strong>不兼容：</strong>不考虑兼容性。</li>
</ul>
<h3 id="2-3-获取统计数据"><a href="#2-3-获取统计数据" class="headerlink" title="2.3 获取统计数据"></a>2.3 获取统计数据</h3><p>百度统计是中文网站使用最为广泛的、免费的流量分析平台。通过这些统计平台可以获取到终端真实的浏览器使用情况, 点击<a class="link"   target="_blank" rel="noopener" href="https://tongji.baidu.com/web/demo/visit/client?siteId=5503017" >查看示例<i class="fas fa-external-link-alt"></i></a>。</p>
<h2 id="三、编码规范"><a href="#三、编码规范" class="headerlink" title="三、编码规范"></a>三、编码规范</h2><p>统一的编码规范对团队项目的长远维护不无裨益。一致性的代码规范可以增强团队开发协作效率、提高代码质量、减少遗留系统维护的负担。<br>与其自己建立前端编码规范，推荐选择社区沉淀下来的规范，如：</p>
<h3 id="3-1-Javascript"><a href="#3-1-Javascript" class="headerlink" title="3.1 Javascript"></a>3.1 Javascript</h3><ul>
<li>Lint工具：ESLint - 目前是社区最流行的、通用的Javascript Lint工具，Lint界的Babel。支持定制插件、preset。如果不想折腾可以选择它的一些预定义配置。</li>
<li>规范：<a class="link"   target="_blank" rel="noopener" href="https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md" >JavaScript Standard Style<i class="fas fa-external-link-alt"></i></a> - 零配置的、‘标准’的Javascript编码规范. 底层基于Eslint。</li>
</ul>
<h3 id="3-2-代码格式化"><a href="#3-2-代码格式化" class="headerlink" title="3.2 代码格式化"></a>3.2 代码格式化</h3><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://prettier.io/" >Prettier<i class="fas fa-external-link-alt"></i></a> - 基本上，所有代码格式相关的工作都可以交给Prettier来做，在这个基础上再使用Eslint覆盖语义相关的检查，推荐IDE安装prettier插件。</li>
</ul>
<h3 id="3-3-Code-Review"><a href="#3-3-Code-Review" class="headerlink" title="3.3 Code Review"></a>3.3 Code Review</h3><p>上述的Lint工具和代码格式化工具, 可以约束代码风格、避免低级的语法错误。但是即使通过上面的Lint和类型检查，代码也可能未必是‘好代码’。这时候，代码评审就派上用场了，Code Review阶段会检查的东西如下：</p>
<ul>
<li>编程原则、设计思想。例如符合SOLID原则? 是否足够DRY？接口设计是否简洁易扩展；</li>
<li>模块耦合程度、代码重复；</li>
<li>代码健壮性。是否存在内存泄露、是否线程安全、是否有潜在性能问题和异常、错误是否被处理；</li>
<li>代码的性能和效率。</li>
<li>是否有没有考虑到的场景？</li>
</ul>
<p>Code Review有很多好处，比如：</p>
<ul>
<li><strong>Code Review可以让其他成员都熟悉代码。</strong>这样保证其他人都可以较快地接手你的工作，或者帮你解决某些问题。</li>
<li><strong>提高代码质量。</strong>毫无疑问， 一方面是主动性的提升代码质量，比如你的代码需要被人Review，会自觉尽量的提高代码质量；另一方面，其他成员可以检查提交方的代码质量。</li>
<li><strong>检查或提高新成员的编程水平。</strong>培养新人时，由于不信任它们提交的代码，我们会做一次Review检查代码是否过关。另一方面这是一次真实的案例讲解, 可以较快提高他们的能力。</li>
</ul>
<p><strong>Code Review的频次：定时</strong> - 及在项目完结后、项目的某个里程碑、或者固定的时间(每天、每个星期..)。 团队成员聚在一起，回顾自己写的代码, 让其他成员进行审查。</p>
<h2 id="四、文档规范"><a href="#四、文档规范" class="headerlink" title="四、文档规范"></a>四、文档规范</h2><p>文档对于项目开发和维护、学习、重构、以及知识管理非常重要。<strong>广义的文档不单指‘说明文件’本身，它有很多形式、来源和载体，可以描述一个知识、以及知识形成和迭代的过程。</strong>例如版本库代码提交记录、代码注释、决策和讨论记录、更新日志、示例代码、规范、传统文档等等</p>
<h3 id="4-1-建立文档中心"><a href="#4-1-建立文档中心" class="headerlink" title="4.1 建立文档中心"></a>4.1 建立文档中心</h3><p><strong>对于项目本身的文档建议放置在关联项目版本库里面，跟随项目代码进行迭代, 当我们在检索或跟踪文档的历史记录时，这种方式是最方便的。</strong><br>建议选择的方案是<strong>Git+Markdown</strong>，也就是说所有的文档都放置在一个git版本库下。Git版本库(例如Gitlab)有很多优势，例如历史记录跟踪、版本化、问题讨论(可以关联issue、或者提交)、多人协作、搜索、权限管理(针对不同的版本库或分组为不同人员设置权限)等等。</p>
<h3 id="4-2-文档格式"><a href="#4-2-文档格式" class="headerlink" title="4.2 文档格式"></a>4.2 文档格式</h3><p>对于开发者来说，<strong>Markdown</strong>是最适合的、最通用的文档格式。支持版本库在线预览和变更历史跟踪。结合IDE工具可以提高Markdown的开发效率。</p>
<h3 id="4-3-注释即文档"><a href="#4-3-注释即文档" class="headerlink" title="4.3 注释即文档"></a>4.3 注释即文档</h3><p><strong>必要和适量的注释对阅读源代码的人来说就是一个路牌, 可以少走很多弯路。</strong><br>关于注释的一些准则，<a class="link"   target="_blank" rel="noopener" href="https://github.com/alibaba/p3c/blob/master/p3c-gitbook/%E7%BC%96%E7%A8%8B%E8%A7%84%E7%BA%A6/%E6%B3%A8%E9%87%8A%E8%A7%84%E7%BA%A6.md" >&lt;阿里巴巴Java开发手册&gt;<i class="fas fa-external-link-alt"></i></a>总结得非常好, 推荐基于这个来建立注释规范。另外通过ESlint是可以对注释进行一定程度的规范。</p>
<h2 id="五、UI设计规范"><a href="#五、UI设计规范" class="headerlink" title="五、UI设计规范"></a>五、UI设计规范</h2><p>如果没有所谓的设计规范，这就导致UI设计出来的产品都是东借西凑，前后不统一，多个应用之间的组件不能复用。这就搞得前端不得不浪费时间，写很多定制化样式和组件，为他们的不专业买单。<br>UI设计规范的意义：</p>
<ul>
<li>提高团队协作效率(产品和开发)；</li>
<li>提高组件的复用率， 统一的组件规范可以让组件更好管理；</li>
<li>保持产品迭代过程中品牌一致性；<br>建立一个定义良好的设计规范需要<strong>UI设计和开发</strong>的紧密配合，有时候也可以由前端来推动。比如很多开源的UI框架，这些开源组件库都经过良好的设计和沉淀, 而且配套了完善的设计原则、最佳实践和设计资源文件，可以帮助业务快速设计出高质量的产品原型。</li>
</ul>
<h2 id="六、测试规范"><a href="#六、测试规范" class="headerlink" title="六、测试规范"></a>六、测试规范</h2><p>前端开发者需要关注的主要有以下几种测试类型：</p>
<ul>
<li><strong>单元测试：</strong>对独立的模块或组件进行测试；</li>
<li><strong>集成测试：</strong>在单元测试的基础上，将模块组合起来，测试它们的组合性；</li>
<li><strong>E2E测试：</strong>在完整、真实的运行环境下模拟真实用户对应用进行测试。主要测试前后端的接口协调性</li>
<li><strong>兼容性测试：</strong>根据浏览器兼容规范，在将版本提交给测试/发布之前，需要确保能符合兼容性要求；</li>
<li><strong>性能测试：</strong>测试和分析是否存在性能问题；</li>
<li><strong>其他：</strong>安全测试、SEO测试；</li>
</ul>
<h2 id="七、前后端协作规范"><a href="#七、前后端协作规范" class="headerlink" title="七、前后端协作规范"></a>七、前后端协作规范</h2><p>前端是Web的一个细分领域，往往不能脱离后端而存在。所以和后端协作的时间是最长的。</p>
<h3 id="7-1-协作流程规范"><a href="#7-1-协作流程规范" class="headerlink" title="7.1 协作流程规范"></a>7.1 协作流程规范</h3><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/2021/10/27/work-norm1/clipboard.png"
                      class=""
                >
<ol>
<li>需求分析。参与者一般有前后端、测试、以及产品. 由产品主持，对需求进行宣贯，接受开发和测试的反馈，确保大家对需求有一致的认知。</li>
<li>前后端开发讨论。讨论应用的一些开发设计，沟通技术点、难点、以及分工问题。</li>
<li>设计接口文档。可以由前后端一起设计；或者由后端设计、前端确认是否符合要求。</li>
<li>并行开发。前后端并行开发，在这个阶段，前端可以先实现静态页面; 或者根据接口文档对接口进行Mock, 来模拟对接后端接口。</li>
<li>在联调之前，要求后端做好接口测试。</li>
<li>真实环境联调。前端将接口请求代理到后端服务，进行真实环境联调。</li>
</ol>
<h3 id="7-2-接口文档规范"><a href="#7-2-接口文档规范" class="headerlink" title="7.2 接口文档规范"></a>7.2 接口文档规范</h3><p>后端通过接口文档向前端暴露接口相关的信息。<br>通常需要包含这些信息：</p>
<ul>
<li>方法名称或者URL</li>
<li>方法描述</li>
<li>请求参数及其描述，必须说明类型(数据类型、是否可选等)</li>
<li>响应参数及其描述, 必须说明类型(数据类型、是否可选等)</li>
<li>可能的异常情况、错误代码、以及描述</li>
<li>请求示例，可选</li>
</ul>
<h3 id="7-3-接口测试与模拟"><a href="#7-3-接口测试与模拟" class="headerlink" title="7.3 接口测试与模拟"></a>7.3 接口测试与模拟</h3><p>为了做到高效率的前后端并行开发，接口的测试与模拟是必要的。</p>
<ul>
<li>前端要求后端在联调之前，需要测试验证好自己的接口是否可以正常工作。而不是在联调期间，把前端当‘接口测试员’，阻塞接口联调进度</li>
<li>另外前端需要在后端接口未准备好之前，通过接口模拟的方式，来编写业务逻辑代码。</li>
</ul>
<h2 id="八、培训-知识管理-技术沉淀"><a href="#八、培训-知识管理-技术沉淀" class="headerlink" title="八、培训/知识管理/技术沉淀"></a>八、培训/知识管理/技术沉淀</h2><p>一个团队的知识管理是非常重要的。 你要问一个刚入行的新手加入团队希望得到什么？很多人的回答是’学习’, 希望自己的技术可以更加精进, 钱倒还是其次。<br>然而现实是目前很多公司的氛围并不是这样的，一天到晚写业务代码、工作量大、每天做重复的事情，而且还加班，工作多年技术也没感觉有多少进步, 确实会让人非常沮丧。<br>为了改善这种情况，有必要在团队中做出一些尝试。</p>
<h3 id="8-1-新人培训"><a href="#8-1-新人培训" class="headerlink" title="8.1 新人培训"></a>8.1 新人培训</h3><p>团队有规范的新成员培训手册，可以节省很多培训的时间，避免每次重复口述一样的内容。培训手册可以包含以下内容：</p>
<ul>
<li><strong>产品架构与组织架构</strong> - 介绍公司背景和产品，一般组织的团队结构和产品的架构是相关联的。</li>
<li><strong>产品研发流程</strong> - 介绍产品开发和迭代会涉及到的流程、以及团队之间的协作衔接。</li>
<li><strong>工作范围</strong> - 团队成员的职责范围。</li>
<li><strong>建立资源索引</strong> - 开发需要设计到的资源，比如各种文档地址、研发系统入口(例如gitlab、bug跟踪系统、文件共享、发布平台、开发/测试环境、监控系统)、协作规范等等。将这些资源整理好可以减少不必要的沟通成本。</li>
<li><strong>规范</strong> - 即本文的主体’前端协作规范’。有规范可循，可以让成员以较快的速度入手开发、同时也减少培训成本投入。</li>
</ul>
<h3 id="8-2-营造技术氛围"><a href="#8-2-营造技术氛围" class="headerlink" title="8.2 营造技术氛围"></a>8.2 营造技术氛围</h3><ul>
<li><strong>定期的专题分享</strong> - 鼓励团队成员定期进行专题学习和研究，编写技术博客，并将学习的成果分享给其他成员。这是一种抱团取暖的学习方式，旨在帮助团队成员一起学习和成长。</li>
</ul>
<p><strong>专题怎么来?</strong><br>1、专题请求。可以请求其他成员完成专题，比如比较深的知识，可以要求团队比较有经验的<br>2、进行学习分享<br>3、学习总结<br>4、项目回顾<br>5、难点攻克<br>6、项目规范<br>7、工具使用</p>
<ul>
<li><strong>落实和完善开发规范</strong> - 规范本身就是团队知识沉淀的一种直接输出。</li>
<li><strong>建立面试题库</strong> - 组织一起解一些面试题或算法题，加深对知识点的理解。</li>
<li><strong>图书分享</strong> - 和离散的文章或教程相比，图书的知识会比较系统，另外很多经典的图书是要静下来好好欣赏的。<br>鼓励重构和持续优化代码</li>
<li><strong>抽象一套基础库或框架，减少重复工作, 提高工作效率</strong> - 不加班先从提高工作效率开始</li>
</ul>

        </div>

        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/10/31/utils-library/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">100+前端工具和网站推荐</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/10/24/nuxt-note1/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Nuxt爬坑</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2021</span>&nbsp;-&nbsp;
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Brennan Wu</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.3</a>
        </div>
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E6%8A%80%E6%9C%AF%E6%A0%88%E8%A7%84%E8%8C%83"><span class="nav-text">一、技术栈规范</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-1-%E6%8A%80%E6%9C%AF%E9%80%89%E5%9E%8B"><span class="nav-text">1.1 技术选型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-2-%E8%BF%8E%E6%8E%A5%E6%96%B0%E6%8A%80%E6%9C%AF"><span class="nav-text">1.2 迎接新技术</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E8%A7%84%E8%8C%83"><span class="nav-text">二、浏览器兼容规范</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-%E7%A1%AE%E5%AE%9A%E5%85%BC%E5%AE%B9%E7%AD%96%E7%95%A5"><span class="nav-text">2.1 确定兼容策略</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-%E7%A1%AE%E5%AE%9A%E6%B5%8F%E8%A7%88%E5%99%A8%E5%88%86%E7%BA%A7"><span class="nav-text">2.2 确定浏览器分级</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-%E8%8E%B7%E5%8F%96%E7%BB%9F%E8%AE%A1%E6%95%B0%E6%8D%AE"><span class="nav-text">2.3 获取统计数据</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83"><span class="nav-text">三、编码规范</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-Javascript"><span class="nav-text">3.1 Javascript</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-%E4%BB%A3%E7%A0%81%E6%A0%BC%E5%BC%8F%E5%8C%96"><span class="nav-text">3.2 代码格式化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-Code-Review"><span class="nav-text">3.3 Code Review</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E6%96%87%E6%A1%A3%E8%A7%84%E8%8C%83"><span class="nav-text">四、文档规范</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#4-1-%E5%BB%BA%E7%AB%8B%E6%96%87%E6%A1%A3%E4%B8%AD%E5%BF%83"><span class="nav-text">4.1 建立文档中心</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-2-%E6%96%87%E6%A1%A3%E6%A0%BC%E5%BC%8F"><span class="nav-text">4.2 文档格式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-3-%E6%B3%A8%E9%87%8A%E5%8D%B3%E6%96%87%E6%A1%A3"><span class="nav-text">4.3 注释即文档</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%94%E3%80%81UI%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83"><span class="nav-text">五、UI设计规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AD%E3%80%81%E6%B5%8B%E8%AF%95%E8%A7%84%E8%8C%83"><span class="nav-text">六、测试规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%83%E3%80%81%E5%89%8D%E5%90%8E%E7%AB%AF%E5%8D%8F%E4%BD%9C%E8%A7%84%E8%8C%83"><span class="nav-text">七、前后端协作规范</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#7-1-%E5%8D%8F%E4%BD%9C%E6%B5%81%E7%A8%8B%E8%A7%84%E8%8C%83"><span class="nav-text">7.1 协作流程规范</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-2-%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3%E8%A7%84%E8%8C%83"><span class="nav-text">7.2 接口文档规范</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-3-%E6%8E%A5%E5%8F%A3%E6%B5%8B%E8%AF%95%E4%B8%8E%E6%A8%A1%E6%8B%9F"><span class="nav-text">7.3 接口测试与模拟</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%AB%E3%80%81%E5%9F%B9%E8%AE%AD-%E7%9F%A5%E8%AF%86%E7%AE%A1%E7%90%86-%E6%8A%80%E6%9C%AF%E6%B2%89%E6%B7%80"><span class="nav-text">八、培训&#x2F;知识管理&#x2F;技术沉淀</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#8-1-%E6%96%B0%E4%BA%BA%E5%9F%B9%E8%AE%AD"><span class="nav-text">8.1 新人培训</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-2-%E8%90%A5%E9%80%A0%E6%8A%80%E6%9C%AF%E6%B0%9B%E5%9B%B4"><span class="nav-text">8.2 营造技术氛围</span></a></li></ol></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="Search..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>



    
<script src="/js/local-search.js"></script>




    
<script src="/js/code-copy.js"></script>




    
<script src="/js/lazyload.js"></script>



<div class="post-scripts">
    
        
<script src="/js/left-side-toggle.js"></script>

<script src="/js/libs/anime.min.js"></script>

<script src="/js/toc.js"></script>

    
</div>



</body>
</html>
